<template>
  <div>
    <template v-if="locale == 'en'">
      <RecordEn :result="resultObj" @page-change="onPageChange" />
    </template>
    <template v-else-if="locale == 'zh-cn'">
      <RecordZhcn :result="resultObj" @page-change="onPageChange" />
    </template>
  </div>
</template>

<script lang="ts" setup name="HomePage">
  import { computed, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { setLang } from '@/i18n';
  import { useI18n } from 'vue-i18n';
  import { orderApi, trafficApi } from '@/api/index';
  import type { FormInstance, FormRules } from 'element-plus';
  import RecordEn from './record/en.vue';
  import RecordZhcn from './record/zh-cn.vue';

  const { locale } = useI18n();

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const emits = defineEmits<{
    (event: 'confirm'): void;
    (event: 'page-loading'): void;
  }>();

  const resultObj = reactive({
    trafficData: [],
    trafficLimit: 20,
    trafficPage: 1,
    trafficTotal: 0,
    trafficLoading: false,
  });

  const getTraffic = async () => {
    if (resultObj.trafficLoading) return false;
    resultObj.trafficLoading = true;
    resultObj.trafficData = [];
    emits('page-loading', true);
    trafficApi({
      limit: resultObj.trafficLimit,
      page: resultObj.trafficPage,
    })
      .then((res) => {
        if (res.data) {
          resultObj.trafficData = res.data.list;
          resultObj.trafficTotal = res.data.count;
        }
        resultObj.trafficLoading = false;
        emits('page-loading', false);
      })
      .catch((err) => {
        console.log('err', err);
        resultObj.trafficLoading = false;
        ElMessage.error(err.message);
        emits('page-loading', false);
      });
  };

  const onPageChange = (type, val) => {
    if (type == 'traffic') {
      resultObj.trafficPage = val;
      getTraffic();
    }
  };

  defineExpose({
    onPageChange,
  });

  onMounted(() => {
    resultObj.trafficPage = 1;
    getTraffic();
  });
</script>
<style lang="scss">
  .main {
    min-height: calc(100vh - 148px);
  }
</style>
